<template>
  <div id="top-nav">
    <span class="login-time">上次登录时间：2020-06-02 10:10:00</span>
    <nav class="navgation">
      <ul>
        <router-link to="/CustomerManage" tag="li">客户管理</router-link>
        <router-link to="/GoodsManage" tag="li">商品管理</router-link>
        <router-link to="/FamilyDoctor" tag="li">家庭医生</router-link>
        <router-link to="/MedicalService" tag="li">医疗服务</router-link>
      </ul>
      <div class="title">大通高科远程健康管理系统</div>
      <ul>
        <router-link to="/OrderManage" tag="li">预约管理</router-link>
        <router-link to="/KnowledgeBase" tag="li">知识库</router-link>
        <router-link to="/AssessmentService" tag="li">评估服务</router-link>
        <router-link to="/SystemManage" tag="li">系统管理</router-link>
      </ul>
    </nav>
    <div class="login-out">
      <img src="../assets/logo.png" />
      <span class="login-out-btn">退出登录</span>
    </div>
    <img class="arr-bg arr-bg-left" src="../assets/images/top_navigation_arr_left.png" alt />
    <img class="arr-bg arr-bg-right" src="../assets/images/top_navigation_arr_right.png" alt />
  </div>
</template>

<script>
export default {
  name: "TopNavigation",
};
</script>

<style scoped>
.router-link-active {
  color: #ffffff!important;
  border: 1px solid #36c9c6!important;
  background: rgba(24, 251, 249, 0.44)!important;
}
#top-nav {
  width: 100%;
  height: 80px;
  display: flex;
  background: url(../assets/images/top_navigation_background.png) no-repeat;
  position: relative;
}
#top-nav .login-time {
  display: inline-block;
  width: 302px;
  font-size: 14px;
  color: #d9d9d9;
  box-sizing: border-box;
  padding-left: 8px;
  padding-top: 20px;
  font-weight: bold;
  letter-spacing: 2px;
}
.navgation {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 66px;
}
.navgation ul {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 0;
}
.navgation .title {
  width: 392px;
  height: 64px;
  background: url(../assets/images/top_navigation_title_bg.png) no-repeat;
  background-size: 100%;
  color: #00eaff;
  font-size: 24px;
  font-weight: bold;
  line-height: 64px;
  text-align: center;
  margin: 6px 14px 0 14px;
}
.navgation ul li {
  width: 96px;
  height: 32px;
  background: rgba(10, 87, 136, 1);
  border: 1px solid #0e84a7;
  box-shadow: 0px 3px 7px 0px #06244d;
  font-size: 16px;
  font-weight: bold;
  color: #e6e6e6;
  line-height: 34px;
  text-align: center;
  margin: 0 8px;
  cursor: pointer;
}
/* .navgation ul li._active {
  color: #ffffff;
  border: 1px solid #36c9c6;
  background: rgba(24, 251, 249, 0.44);
} */
.login-out {
  display: inline-flex;
  width: 302px;
  height: 52px;
  box-sizing: border-box;
  padding-right: 40px;
  font-size: 14px;
  color: #d9d9d9;
  align-items: center;
  justify-content: flex-end;
  font-weight: bold;
}
.login-out img {
  height: 32px;
  width: 32px;
  border-radius: 100%;
  background-color: #eeeeee;
  margin-right: 7px;
}
.login-out .login-out-btn {
  cursor: pointer;
}
.arr-bg {
  height: 8px;
  width: 268px;
  position: absolute;
  bottom: 11px;
}
.arr-bg-left {
  left: 16px;
}
.arr-bg-right {
  right: 16px;
}
</style>